<template>
  <div>
    <!-- <input v-model="message" /> -->
    <!-- <input :value="message" @input="message = $event.target.value" /> -->

    <!-- 组件上使用v-model -->
    <!-- <pf-input v-model="message"></pf-input> -->
    <!-- <pf-input :modelValue="message" @update:model-value="message = $event"></pf-input> -->

    <!-- 绑定两个v-model -->
    <pf-input v-model="message" v-model:title="title"></pf-input>


    <h2>{{ message }}</h2>
    <h2>{{ title }}</h2>
  </div>
</template>

<script>
import PfInput from "./PfInput.vue";
export default {
  components: {
    PfInput,
  },
  data() {
    return {
      message: "Hello World",
      title: "目录"
    };
  },
};
</script>

<style scoped>
</style>